<template>
    <div class="pages">
        <u>总数据 {{value.count}} 条</u>
        <a @click="toggleClick(value.currentpage-1)" class="p_back" v-if="value.currentpage > 1">{{backText}}</a>
        <a @click="toggleClick(t)" v-for="t in d.leftAry" :key="t">{{t}}</a>
        <samp v-if="d.leftSplit">...</samp>
        <a @click="toggleClick(t)" v-for="t in d.currentToLeft" :key="t">{{t}}</a>
        <span>{{value.currentpage}}</span>
        <a @click="toggleClick(t)" v-for="t in d.currentToRight" :key="t">{{t}}</a>
        <samp v-if="d.rightSplit">...</samp>
        <a @click="toggleClick(t)" v-for="t in d.rightAry" :key="t">{{t}}</a>
        <a @click="toggleClick(value.currentpage+1)" class="p_next" v-if="value.currentpage < d.pageCount">{{nextText}}</a>
    </div>
</template>

<script setup>
import { getCurrentInstance,reactive,watch } from 'vue'
let { proxy } = getCurrentInstance()
const props = defineProps({
    value: {
        require: true,
        type: Object,
        default: {
            currentpage: 1,
            pagesize: 20,
            count: 0 //数据总数
        }
    },
    init:         { type: Function, require: true, },
    autoInit:     { type: Boolean, default: true }, //是否一开始就执行
    displacement: { type: Number, default: 3 }, //中间往左右显示几位
    aroundFixed:  { type: Number, default: 2 }, //前后固定显示几位
    backText:     { type: String, default: "" },
    nextText:     { type: String, default: "" },
})

let m = Math.ceil(props.value.count / props.value.pagesize); //记录总数/每页显示=需要几页
let d = reactive({
  pageCount: m <= 0 ? 1 : m,
  leftAry: [],
  leftSplit: false,
  currentToLeft: [],
  currentToRight: [],
  rightSplit: false,
  rightAry: []
})

let Left = () => { // 左边固定显示内容
    d.leftSplit = false
    d.leftAry = []

    if (props.displacement + 1 >= props.value.currentpage) return;
    let start = 1, //起始点肯定是1
        end = props.aroundFixed;//理论结束点
    let s_end = props.value.currentpage - props.displacement; //实际结束点
    d.leftSplit = s_end - end > 1;
    if (s_end <= end) end = --s_end;

    for (let t = start, i = 0; t <= end; t++, i++)
        d.leftAry.push(t)
}
let CurrentToLeft = () => { // 中间往左显示内容
    d.currentToLeft = []

    let start = 0, end = 0;
    end = props.value.currentpage - 1;
    start = props.value.currentpage - props.displacement;
    if (start < 1) start = 1;

    for (var t = start, i = 0; t <= end; t++, i++)
        d.currentToLeft.push(t)
}
let CurrentToRight = () => { // 中间往右显示内容
    d.currentToRight = []

    let start = 0, end = 0;
    start = props.value.currentpage > d.pageCount ? d.pageCount + 1 : props.value.currentpage + 1;
    end = props.value.currentpage + props.displacement;
    if (end >= d.pageCount) end = d.pageCount;

    for (var t = start, i = 0; t <= end; t++, i++)
        d.currentToRight.push(t)
}
let Right = () => { // 右边固定显示内容
    d.rightSplit = false
    d.rightAry = []

    if (d.pageCount - props.displacement <= props.value.currentpage) return;
    let start = d.pageCount - props.aroundFixed + 1, //理论上起始点           
        s_start = props.value.currentpage + props.displacement; //实际起始点

    d.rightSplit = start - s_start > 1;
    if (s_start >= start) start = ++s_start;
    var end = d.pageCount;

    for (var t = start, i = 0; t <= end; t++, i++)
        d.rightAry.push(t)
}
watch(
    [
        () => props.value.count,
        () => props.value.currentpage,
    ],
    (val) => {
        // console.log("watch",val)
        let m = Math.ceil(props.value.count / props.value.pagesize); //记录总数/每页显示=需要几页
        d.pageCount = m <= 0 ? 1 : m
        Left()
        CurrentToLeft()
        CurrentToRight()
        Right()
        // console.log(d)
    },
)
if(props.autoInit){
    props.init()
}

const toggleClick = page => {
    props.value.currentpage = page
    props.init()
    // proxy.$emit('toggleClick', page) //这是对外放出去，这里的名称就是对外的名称
}
</script>

<style scoped>

</style>